<template>
  <div class="item_box_left">
    <img :src="imgUrl"
         alt="" />
    <div class="detial_box">
      <a class="title"
         @click="changeRouter()"
         :href="href">
        <p>{{category.categoryName}}</p>
      </a>
      <div class="hr_box"></div>
      <div class="detail">
        <p>
          {{category.categoryDetail}}
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { getCategoryImg } from "../../api/http.js";
export default {
  props: {
    toCategory: {}
  },
  created () {
    this.getCategoryImg(this.category.categoryImg)
  },
  data () {
    return {
      category: this.toCategory,
      imgUrl: '',
      href: this.Constants.baseRouterPath + this.toCategory.path
    }
  },
  methods: {
    async getCategoryImg (imgPath) {
      const { data: res } = await getCategoryImg(imgPath);
      this.imgUrl = window.URL.createObjectURL(res);
    },
    changeRouter () {
      // 将路由路径传递给Category组件
      this.$emit('getRouterPathFromItem', this.toCategory.path);
    }
  },
}
</script>
<style lang="less" scoped>
//   图片在左边的div
.item_box_left {
  display: flex;
  margin-left: 200px;
  margin-right: 200px;
  margin-top: 20px;
}
//   详情外壳div
.detial_box {
  width: 100%;
  height: 200px;
  padding-left: 40px;
  padding-right: 40px;
  //  标题
  .title {
    width: 100%;
    height: 20%;
    text-align: center;
    text-decoration: none;
    p {
      margin: 0;
      color: violet;
      padding-top: 7px;
      font-size: 20px;
      font-weight: bold;
    }
  }
  //  分割线
  .hr_box {
    height: 1%;
    width: 100%;
    background-color: rgba(49, 49, 49, 0.473);
  }
  //  详情内容div
  .detail {
    width: 100%;
    height: 79%;
    padding: 0;
    p {
      font-size: 15px;
      color: rgba(238, 130, 238, 0.74);
    }
  }
}
</style>